<template>
  <div >
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/> -->
    <About />
    <div>{{name}}</div>
    <div>{{id}}</div>
    <button @click="click2">click</button>
    <h1>{{obj.name}}</h1>
    <h1>{{box.name}}</h1>
    <ul>
      <li v-for="(v,i) in data1" :key="i">
        {{v.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  import About from '@/views/AboutView.vue'
  // import { x } from './JS/moduleA' //导入一个变量
  // import { name,age,msg } from './JS/moduleA' //导入多个变量
  //导出函数 as n 别名
  import box,{n,age,action} from '@/JS/moduleA'
  import obj from '@/JS/moduleB'
  import {data1,data2} from '@/JS/userData'

 export default {
  components:{
    About
  },
  data(){
      return {
        id:1,
        name: n,
        age,
        action,
        obj,
        box,
        data1,
        data2
      }
  },
  mounted(){
    // console.log(x)
  },
  methods:{
    click2(){
       this.id = action(2,2)
    }
  }
 }
</script>

